<template>

  <div class="addperson">
    <h4>添加人员</h4>
   <form @submit.prevent="b6()" class="ff">
        <table align="center" class="table1" border="1" cellpadding="0" cellspacing="0" borderColor="grey"> 
            
  <tbody>
            <tr>
                <td align="center" width="100" height="50">姓名</td>
             
                <td width="100" height="50"><input type="text" name="" id="" placeholder="请输入姓名" v-model.lazy.trim="objF.na" required></td>
            </tr>
            <tr>
                <td align="center" width="100" height="50">性别</td>
                <td width="100" height="50">
                <input class="i1" type="radio" v-model="objF.xb" value="0"/><span>女</span>
                <input class="i2" type="radio" v-model="objF.xb" value="1"/><span>男</span>
                </td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">年龄</td>
                <td width="100" height="50"><input type="number" min="18" max="70" placeholder="请输入年龄" v-model.lazy.trim="objF.nl" required></td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">职务</td>
                <td width="100" height="50">
                    <!-- 将v-mode所获得的value值转换为数字类型数据 -->
                    <select v-model.number="objF.port" required>
                        <option value="" disabled>--请选择职务--</option>
                        <option value="1">老板</option>
                        <option value="2">总经理</option>
                        <option value="3">部门主管</option>
                        <option value="4">组长</option>
                        <option value="5">员工</option>

                    </select>
                </td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">薪资</td>
                <td width="100" height="50"><input type="number" min="2500" placeholder="请输入薪资"  v-model.lazy.trim="objF.xz" required></td>
            </tr>
             <tr>
                <td align="center" width="100" height="50">入职时间</td>
                <td width="100" height="50"><input type="date" name="" id="" placeholder="请输入入职时间****-**-**" v-model="objF.ti" required></td>
            </tr>
    </tbody>

    <tfoot align="center">
        <th colspan="2">
            <button class="b6" >添加人员</button>
        </th>
      
    </tfoot>
      </table>
      </form>
  

  </div>
</template>

<script>
import{mapMutations} from 'vuex';
import data from "../assets/JS/data.js";

export default {
name:"AddPerson",
 data(){
    return{
   objF:{
    na:'',
    xb:0,
    nl:18,
    port:'',
    xz:2500,
    ti:'',
    },
   data,
    }
 },
 methods:{
    //... 扩展运算符
    //利用扩展运算符，将mutations对象中的addlist属性提取出来使用
    ...mapMutations(['addlist']),

    //创建表单提交事件的函数
   b6(){
    //验证选择的入职时间不得超过当天时间
    let nowtime = new Date().getTime(); //当前系统时间戳
    let Ctime = new Date(this.objF.ti).getTime();//日期选择器时间戳
    if(Ctime>nowtime){
        alert('录入的时间戳不得超过当天时间');
        return;
    }

    //将数据objF整个提交给vuex内部处理
     this.addlist(this.objF)
    //添加完成后，重置表单

 

    
       
       }
 }
 
}
</script>

<style scoped>
.addperson input,select{
    width: 200px;
    height: 35px;
    border: none;
    outline: none;
    background-color: rgb(255, 255, 255);
}
.addperson .i1{
       width: 25px;
    height: 20px;
    border: none;
    outline: none;
    background-color: rgb(255, 255, 255);
}
.addperson .i2{
       width: 25px;
    height: 20px;
    border: none;
    outline: none;
    background-color: rgb(255, 255, 255);
}
.addperson button{
    width: 100%;
    height: 35px;
    background-color: rgb(124, 233, 233);
    border-radius: 5px;
    border: none;
}
</style>